<template>
	<view class="flex-col page">
		<view class="flex-col group">
			<MyHeader titleColor="#fff" :paddingBottom="90" title="拼车"
				background="url(https://bs-mini-program.oss-cn-hangzhou.aliyuncs.com/images/0/%E5%9B%BE%E7%89%87/6.jpg)">
			</MyHeader>
			<view class="flex-col relative section_4">
				<view class="flex-row items-center">
					<view class="flex-col items-start section_5">
						<text class="font text">拼车</text>
						<view class="mt-12 section_7"></view>
					</view>
					<text class="font text_2 ml-55">打车</text>
				</view>
				<view class="flex-col section_8">
					<view class="flex-col group_4">
						<view class="flex-row items-center group_5" style="justify-content: space-between;">
							<uni-data-select style="width:40%" :clear="false" v-model="value1" :localdata="range"
								@change="change1" placeholder='请选择出发地'></uni-data-select>
							<view @click="interchange" class="flex-row justify-center items-center image-wrapper_2">
								<image class="image_7" src="../svg/chuxing3.svg" />
							</view>
							<uni-data-select placeholder='请选择目的地' style="width:40%" :clear="false" v-model="value2"
								:localdata="range" @change="change2"></uni-data-select>
						</view>
						<up-calendar @confirm="calendarConfirm" @close="calendarShow = false" :monthNum="24"
							:minDate="minDate" :maxDate="maxDate" :show="calendarShow"></up-calendar>
						<view class="flex-row group_6" @click="calendarShow = true">
							<text
								class="font_3 text_4">{{dayjs(querys?.appointmentTime).format('MM月DD日')||''}}&nbsp;&nbsp;&nbsp;{{weekday}}</text>
						</view>
					</view>
					<view @click="goSearchTaxi" class="flex-col justify-start items-center text-wrapper_3 mt-29">
						<text class="text_6">查询车次</text>
					</view>
				</view>
			</view>
		</view>
		<view class="flex-col items-start group_7">
			<text class="font_4 text_7">出行计划</text>
			<view class="mt-10 section_9"></view>
		</view>
		<block v-if="userCarOrders.length" v-for="(item,index) in userCarOrders" :key="index">
			<view class="flex-col group_8">
				<view class="flex-col justify-start items-center self-start text-wrapper_4">
					<text class="font_5 text_8">日期：{{item.carpoolDetail?.appointmentTime.split(' ')[0] ||''}}</text>
				</view>
				<view class="flex-col self-stretch group_9">
					<view class="flex-row self-stretch section_10" @click="onGoCarOrder(item)">
						<text
							class="self-start text_9 text_12">{{item.carpoolDetail?.appointmentTime.slice(11, 16)||''}}</text>
						<view class="shrink-0 section_11 view"></view>
						<view class="flex-col flex-1 self-start group_10">
							<view class="flex-row group_11">
								<view class="flex-col justify-start items-center text-wrapper_5"><text
										class="font_6">起</text></view>
								<text class="ml-8 font_4 text_9 text_10">{{item.carpoolDetail?.startingLocation}}</text>
							</view>
							<view class="mt-14 flex-row group_11">
								<view class="flex-col justify-start items-center text-wrapper_6">
									<text class="font_6 text_13">终</text>
								</view>
								<text class="ml-8 font_4 text_9">{{item.carpoolDetail?.destination}}</text>
							</view>
							<view class="mt-14 flex-row justify-between items-center group_11">
								<image class="image_9" src="/static/car/圆形 1.png" />
								<text class="font_5 text_9 text_14">{{item.carpoolDetail?.driverName}}</text>
								<image class="image_10" src="/static/car/分组 6.png" />
								<text class="text_9 text_15">{{item.carpoolDetail?.driverPhone}}</text>
							</view>
						</view>
						<view class="shrink-0 section_11"></view>
						<view class="flex-col shrink-0 self-center group_12">
							<text
								class="self-center font_2 text_9 text_11">{{item.carpoolDetail?.currentSeats}}/4</text>
							<image class="self-start image_8 mt-9" src="/static/car/画板 4.png" />
						</view>
					</view>
				</view>
			</view>
		</block>
		<!-- 出行计划为空 -->
		<ListisNull v-else :marginTop="50" content="无出行计划"></ListisNull>
	</view>
	<addNewInfo go="../publish/publish" bottom="350"></addNewInfo>
</template>

<script setup>
	import dayjs from 'dayjs';
	import {
		computed,
		reactive,
		ref
	} from 'vue';
	import {
		getWeekDay,
		isLoginAndGo
	} from '../../../utils';
	import {
		getUserCarOrdersAPI
	} from '../../../apis/taxi';
	import {
		useUserStore
	} from '../../../store/useUserStore';
	import {
		onShow
	} from '@dcloudio/uni-app'
	import {
		getQueryAddress
	} from '@/apis/taxi';
	const userStore = useUserStore()

	// 计算1年前的日期
	const minDate = computed(() => {
		const year = new Date().getFullYear() - 1;
		const month = new Date().getMonth();
		const day = new Date().getDate();
		return `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
	});
	// 计算1年后的日期
	const maxDate = computed(() => {
		const year = new Date().getFullYear() + 1;
		const month = new Date().getMonth();
		const day = new Date().getDate();
		return `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
	});
	const querys = reactive({
		startingLocation: userStore.address.startingLocation || '西门',
		destination: userStore.address.destination || '北站南广场',
		appointmentTime: dayjs().format('YYYY-MM-DD'),
	})
	const goSearchTaxi = () => {
		uni.navigateTo({
			url: "/subpkg/taxi/searchTaxi/searchTaxi?querys=" + JSON.stringify(querys)
		})
	}
	// 控制日历显示隐藏
	const calendarShow = ref(false)
	// 确定预约日期
	const calendarConfirm = (e) => {
		querys.appointmentTime = e[0]
		calendarShow.value = false
	}
	const weekday = computed(() => {
		return getWeekDay(querys.appointmentTime)
	})
	// 获取用户出行计划表
	const userCarOrders = ref([])

	const getUserCarOrders = async () => {
		const res = await getUserCarOrdersAPI(userStore.userInfo.id)
		userCarOrders.value = res.data
		// console.log(res);
	}
	onShow(async () => {
		await isLoginAndGo('/subpkg/taxi/index/index')
		getUserCarOrders()
	})
	// 交换始发地和目的地
	const interchange = () => {
		let temp = querys.startingLocation
		querys.startingLocation = querys.destination
		querys.destination = temp

		let temp2 = value1.value
		value1.value = value2.value
		value2.value = temp2
	}


	const value1 = ref('')
	const value2 = ref('')
	const range = ref([])
	const change1 = (e) => {
		querys.startingLocation = range.value.find(item => e == item.value).text
	}
	const change2 = (e) => {
		querys.destination = range.value.find(item => e == item.value).text
	}
	const sendSearchRequest = async () => {
		const res = await getQueryAddress("")
		range.value = res.data.map(item => {
			return {
				value: item.id, // 使用id作为value
				text: item.address // 使用address作为显示文本
			}
		})
	}
	sendSearchRequest()

	// 跳转车次订单
	const onGoCarOrder = (item) => {
		uni.navigateTo({
			url: '/subpkg/taxi/orderIndex/orderIndex?id=' + item.carpoolDetail.id
		})
	}
</script>

<style scoped>
	::v-deep .uni-select {
		padding: 0 30rpx 0 10rpx;
	}

	.ml-5 {
		margin-left: 10rpx;
	}

	.ml-11 {
		margin-left: 22rpx;
	}

	.ml-55 {
		margin-left: 110rpx;
	}

	.mt-29 {
		margin-top: 58rpx;
	}

	.mt-9 {
		margin-top: 18rpx;
	}

	.mt-15 {
		margin-top: 30rpx;
	}

	.ml-101 {
		margin-left: 202rpx;
	}

	.page {
		background-color: #f7f8fa;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
	}

	.group {
		height: 842rpx;
	}

	.section {
		padding-top: 36rpx;
		background-image: url('https://ide.code.fun/api/image?token=676f93414ae84d001221f681&name=b9a54a8c28e7c101a20dafb64dcbbf27.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.group_2 {
		padding: 0 28rpx;
	}

	.image {
		width: 34rpx;
		height: 22rpx;
	}

	.image_2 {
		width: 30rpx;
		height: 22rpx;
	}

	.image_3 {
		width: 48rpx;
		height: 22.66rpx;
	}

	.group_3 {
		margin-top: 44rpx;
		padding-left: 34rpx;
		padding-right: 12rpx;
	}

	.image_4 {
		width: 18rpx;
		height: 34rpx;
	}

	.section_2 {
		padding: 12rpx 24rpx;
		background-color: #ffffff99;
		border-radius: 50rpx;
		height: 64rpx;
		border-left: solid 1rpx #97979733;
		border-right: solid 1rpx #97979733;
		border-top: solid 1rpx #97979733;
		border-bottom: solid 1rpx #97979733;
	}

	.image-wrapper {
		width: 38rpx;
	}

	.image_6 {
		width: 38rpx;
		height: 14rpx;
	}

	.section_3 {
		background-color: #33333333;
		width: 1rpx;
		height: 37rpx;
	}

	.image_5 {
		width: 34rpx;
		height: 34rpx;
	}

	.section_6 {
		margin-top: 180rpx;
		background-image: linear-gradient(0deg, #f7f8fa 0%, #ffffff00 121.4%);
		height: 84rpx;
	}

	.section_4 {
		margin: -80rpx 30rpx 0;
		background-color: #f7f8fa;
		border-radius: 16rpx;
	}

	.section_5 {
		padding-top: 28rpx;
		background-image: url('https://ide.code.fun/api/image?token=676f93414ae84d001221f681&name=fdc42ef771f618fc0806dbbec7fc6826.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 376rpx;
		height: 84rpx;
	}

	.font {
		font-size: 32rpx;
		font-family: SourceHanSansCN;
		letter-spacing: 4rpx;
		line-height: 30.08rpx;
	}

	.text {
		margin-left: 132rpx;
		color: #4c8eef;
	}

	.section_7 {
		margin-left: 140rpx;
		background-color: #4c8eef;
		width: 56rpx;
		height: 4rpx;
	}

	.text_2 {
		color: #333333;
		line-height: 29.6rpx;
	}

	.section_8 {
		padding: 42rpx 22rpx 80rpx;
		background-color: #ffffff;
		border-radius: 0rpx 0rpx 16rpx 16rpx;
	}

	.group_4 {
		border-bottom: solid 1rpx #e5e5e5;
	}

	.group_5 {
		padding: 0 0 28rpx;
		border-bottom: solid 1rpx #e5e5e5;
	}


	.font_2 {
		font-size: 40rpx;
		font-family: SourceHanSansCN;
		line-height: 37.52rpx;
		color: #333333;
	}

	.image-wrapper_2 {
		/* flex: 1 1 50rpx; */
	}

	.image_7 {
		width: 56rpx;
		height: 56rpx;
	}

	.text-wrapper_2 {
		margin-left: 4rpx;
		flex: 1 1 202rpx;
	}

	.text_3 {
		line-height: 37.28rpx;
	}

	.group_6 {
		padding: 32rpx 16rpx 28rpx;
	}

	.font_3 {
		font-size: 32rpx;
		font-family: SourceHanSansCN;
		line-height: 26.4rpx;
		color: #333333;
	}

	.text_4 {
		line-height: 27.78rpx;
	}

	.text_5 {
		line-height: 28.1rpx;
	}

	.text-wrapper_3 {
		margin-right: 6rpx;
		padding: 24rpx 0 20rpx;
		background-color: #4c8eef;
		border-radius: 40rpx;
	}

	.text_6 {
		color: #ffffff;
		font-size: 36rpx;
		font-family: SourceHanSansCN;
		line-height: 33.88rpx;
	}

	.group_7 {
		margin-top: 56rpx;
		padding: 0 36rpx;
	}

	.section_9 {
		margin-left: 16rpx;
		background-color: #eb5959;
		width: 82rpx;
		height: 6rpx;
	}

	.group_8 {
		margin-top: 26rpx;
		padding-left: 24rpx;
		padding-right: 16rpx;
	}

	.text-wrapper_4 {
		padding: 8rpx 0;
		background-color: #ffe3e3;
		border-radius: 24rpx;
		width: 326rpx;
	}

	.font_5 {
		font-size: 24rpx;
		font-family: SourceHanSansCN;
		line-height: 22.28rpx;
	}

	.text_8 {
		color: #eb5959;
	}

	.group_9 {
		padding-top: 20rpx;
	}

	.section_10 {
		margin-right: 8rpx;
		padding: 12rpx 32rpx;
		background-color: #ffffff;
		border-radius: 12rpx;
	}

	.section_11 {
		background-image: repeating-linear-gradient(90deg, #e5f1ff, #e5f1ff 2.08%, transparent 2.08%, transparent 4.163%);
		background-position: -2rpx 0rpx;
		width: 2rpx;
		height: 194rpx;
	}

	.view {
		margin-left: 24rpx;
	}

	.group_10 {
		margin-top: 24rpx;
		padding-left: 24rpx;
		padding-right: 12rpx;
	}

	.text-wrapper_5 {
		padding-bottom: 12rpx;
		background-image: url('/static/car/分组 7.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 20rpx;
		height: 26rpx;
	}

	.font_6 {
		font-size: 12rpx;
		font-family: SourceHanSansCN;
		line-height: 11.12rpx;
		color: #ffffff;
	}

	.font_4 {
		font-size: 28rpx;
		font-family: SourceHanSansCN;
		line-height: 26.4rpx;
		color: #333333;
	}

	.text_9 {
		opacity: 0.9;
	}

	.text_12 {
		margin-top: 68rpx;
		color: #4c8eef;
		font-size: 40rpx;
		font-family: SourceHanSansCN;
		line-height: 30.56rpx;
	}

	.text_7 {
		color: #eb5959;
		line-height: 26.06rpx;
	}

	.text_10 {
		line-height: 26.26rpx;
	}

	.group_11 {
		padding: 0 4rpx;
	}

	.text-wrapper_6 {
		padding-bottom: 12rpx;
		background-image: url('/static/car/分组 8.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 20rpx;
		height: 26rpx;
	}

	.text_13 {
		line-height: 11.04rpx;
	}

	.image_9 {
		border-radius: 50%;
		width: 28rpx;
		height: 28rpx;
	}

	.text_14 {
		color: #808080;
		line-height: 22.16rpx;
	}

	.image_10 {
		width: 26rpx;
		height: 26rpx;
	}

	.text_15 {
		color: #808080;
		font-size: 24rpx;
		font-family: SourceHanSansCN;
		line-height: 18.22rpx;
	}

	.group_12 {
		margin-left: 48rpx;
		width: 82.6rpx;
	}

	.text_11 {
		color: #4c8eef;
		line-height: 39.16rpx;
	}

	.image_8 {
		width: 68rpx;
		height: 68rpx;
	}

	.image_11 {
		width: 90rpx;
		height: 90rpx;
	}

	.section_12 {
		margin-top: 132rpx;
		filter: drop-shadow(0rpx -4rpx 8rpx #a1727214);
		background-color: #ffffff;
	}

	.equal-division-item {
		width: 48rpx;
		height: 48rpx;
	}
</style>